<template>
  <div class="qrcode-box">
    <div class="module-card">
      <div class="qrcodeDom" ref="qrcodeDom1" />
      <img class="qrcodeDom" ref="qrcodeDom2" />
      <div class="qrcodeDom" ref="qrcodeDom3" />
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.initDataFun(); // 初始化数据
  },
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {
      this.createQRCode1();
      this.createQRCode2();
      this.createQRCode3();
    },
    createQRCode1() {
      const QRCodeDom1 = this.$refs.qrcodeDom1; // 生成并展示二维码的DOM
      QRCode.toCanvas(
        "https://blog.csdn.net/weixin_44136505?type=blog",
        {
          width: QRCodeDom1.clientWidth,
          height: QRCodeDom1.clientHeight,
          margin: 0, // 外边距
        },
        (error, canvas) => {
          if (error) {
            console.error(error);
          }
          QRCodeDom1.appendChild(canvas);
        }
      );
    },
    createQRCode2() {
      const QRCodeDom2 = this.$refs.qrcodeDom2; // 生成并展示二维码的DOM
      QRCode.toDataURL(
        "https://blog.csdn.net/weixin_44136505?type=blog",
        {
          width: QRCodeDom2.clientWidth,
          height: QRCodeDom2.clientHeight,
          type: "image/png", // 类型
          quality: 1, // 图片质量A Number between 0 and 1
          errorCorrectionLevel: "L", // 容错率
          margin: 0, // 外边距
          correctLevel: 0, // 二维码结构复杂性 0~3
          color: {
            dark: "#008000", // 前景色
            light: "#fff", // 背景色
          },
        },
        (error, url) => {
          if (error) {
            console.error(error);
          }
          QRCodeDom2.src = url;
        }
      );
    },
    createQRCode3() {
      const QRCodeDom3 = this.$refs.qrcodeDom3; // 生成并展示二维码的DOM
      QRCode.toString(
        "https://blog.csdn.net/weixin_44136505?type=blog",
        {
          width: QRCodeDom3.clientWidth,
          height: QRCodeDom3.clientHeight,
          quality: 1, // 图片质量A Number between 0 and 1
          errorCorrectionLevel: "L", // 容错率
          margin: 0, // 外边距
          correctLevel: 0, // 二维码结构复杂性 0~3
          color: {
            dark: "#ff0000", // 前景色
            light: "#fff", // 背景色
          },
        },
        (error, string) => {
          if (error) {
            console.error(error);
          }
          QRCodeDom3.innerHTML = string;
        }
      );
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.qrcode-box {
  .module-card {
    display: flex;
    .qrcodeDom {
      width: 200px;
      height: 200px;
      margin-left: 40px;
      color: #ff0000;
    }
  }
}
</style>
